<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="layui/css/layui.css">
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script src="layui/layui.js" charset="utf-8"></script>
<title>测试页面</title>
<script>
	layui.use('layer', function() { //独立版的layer无需执行这一句
		var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

		//触发事件
		var active = {
			offset : function(othis) {
				var type = othis.data('type'), text = othis.text();
				layer.open({
					type : 1,
					offset : type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
					,
					id : 'layerDemo' + type //防止重复弹出
					,
					content : '<div style="padding: 20px 100px;">' + text
							+ '</div>',
					btn : '关闭全部',
					btnAlign : 'c' //按钮居中
					,
					shade : 0 //不显示遮罩
					,
					yes : function() {
						layer.closeAll();
					}
				});
			}
		};

		$('#layerDemo .layui-btn').on('click', function() {
			var othis = $(this), method = othis.data('method');
			active[method] ? active[method].call(this, othis) : '';
		});

	});
</script>
</head>

<body class="layui-layout-body">

	<div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;">
		<button data-method="offset" data-type="auto"
			class="layui-btn layui-btn-normal">居中弹出</button>
	</div>

</body>
</html>